<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<style>
		body {
			padding: 0;
			background-color: #222;
		}

		/* border-image无法实现圆角，所以换一个思路：通过padding来实现，给父节点设置渐变背景，通过padding模拟边框
		（此处的padding值就是border需要的值），注意父元素和子元素的border-radius属性值保持一致。 */
		.demo1 {
			width: 200px;
			height: 100px;
			border: 10px solid;
			margin-bottom: 50px;
			border-image: -webkit-linear-gradient(red, blue) 30 30;
			border-image: -moz-linear-gradient(red, blue) 30 30;
			border-image: linear-gradient(red, blue) 30 30;
		}

		.demo2 {
			width: 200px;
			height: 100px;
			background: -webkit-linear-gradient(0deg, red, blue);
			border-radius: 10px;
			/* overflow: hidden; */
			/* border: 1px solid transparent; */
			/* float: right; */
			/* position: absolute;
			right: 0; */
			/* padding: 1px; */
			/* display: inline-block; */
		}

		.demo0 {
			width: 190px;
			height: 90px;
			background-color: #fff;
			border-radius: 6px;
			margin: 0 auto;
			margin-top: 5px;
		}

		.content {
			width: 100px;
			height: 100px;
			margin-top: 50px;
			border: 10px solid #ddd;
			border-image: -webkit-linear-gradient(red, yellow) 30 30;
			border-image: -moz-linear-gradient(red, yellow) 30 30;
			border-image: linear-gradient(red, yellow) 30 30;
		}

		.content0 {
			width: 100px;
			height: 100px;
			margin-top: 50px;
			box-sizing: border-box;
			padding: 5px;
			border-radius: 50%;
			background-image: -webkit-linear-gradient(to top, red 0%, blue 30%, yellow 60%, green 90%);
			background-image: -moz-linear-gradient(to top, red 0%, blue 30%, yellow 60%, green 90%);
			background-image: linear-gradient(to top, red 0%, blue 30%, yellow 60%, green 90%);
		}

		.box {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: #fff;
		}
	</style>
	<body>
		<div class="demo1"></div>
		<div class="demo2">
			<div class="demo0"></div>
		</div>
		<div class="content">
		</div>
		<div class="content0">
			<div class="box"></div>
		</div>

	</body>
</html>
